<template>
  <div class="box">
    <el-form :model="form" label-width="120px" v-loading="loading" status-icon :rules="rules" ref="formRef">
      <div style="display: inline-block">
        <el-form-item label="商品id" prop="itemId">
          <el-input v-model="form.itemId" style="width: 200px;" />
        </el-form-item>
      </div>
      <div style="display: inline-block">
        <el-form-item label="用户id" prop="flowerUserId">
          <el-input v-model="form.flowerUserId" style="width: 200px;" />
        </el-form-item>
      </div>
      <div style="display: inline-block">
        <el-form-item label="购买数量" prop="number">
          <el-input v-model="form.number" style="width: 200px;" />
        </el-form-item>
      </div>
      <div style="display: inline-block">
        <el-form-item label="服务费" prop="serviceCharge">
          <el-input v-model="form.serviceCharge" style="width: 200px;" />
        </el-form-item>
      </div>
      <div style="display: inline-block">
        <el-form-item label="是否已支付" prop="isPaid">
          <el-radio-group v-model="form.isPaid">
            <el-radio :label="Number(1)">是</el-radio>
            <el-radio :label="Number(0)">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div style="display: inline-block">
        <el-form-item label="是否已完成" prop="isCompleted">
          <el-radio-group v-model="form.isCompleted">
            <el-radio :label="Number(1)">是</el-radio>
            <el-radio :label="Number(0)">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="折扣" prop="discount">
          <el-input v-model="form.discount" style="width: 400px;" />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="预约时间" prop="appointmentTime">
          <el-date-picker v-model="form.appointmentTime" />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" style="width: 1000px;" />
        </el-form-item>
      </div>
      <el-form-item label="订单备注">
        <el-input v-model="form.description" type="textarea" style="width: 1000px" rows="5" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onInsert">插入</el-button>
        <el-popconfirm @confirm="clearAll" title="确认清空">
          <template #reference>
            <el-button>清空</el-button>
          </template>
        </el-popconfirm>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reactive } from 'vue';
import { createOrder } from "@/api/order";
import { ElMessage } from 'element-plus';
export default {
  name: "orderInsert",
  data() {
    return {
      // do not use same name with ref
      form: reactive({
        flowerUserId: '',
        itemId: '',
        number: '',
        serviceCharge: '',
        discount: '',
        totalCharge: '',
        appointmentTime: '',
        description: '',
        isPaid: '',
        isCompleted: '',
        address: ''
      }),
      loading: false,
      rules: {
        itemId: [
          { required: true, message: '请输入商品Id', trigger: 'blur' }
        ],
        flowerUserId: [
          { required: true, message: '请输入用户Id', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '请输入购买数量', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              var num = Number(value)
              if (!(0 < num )) {
                callback(new Error("请输入正整数"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          },
        ],
        serviceCharge: [
          { required: true, message: '请输入服务费', trigger: 'blur' }
        ],
        discount: [
          { required: true, message: '请输入折扣', trigger: 'blur' },
          { min: 1, max: 4, message: '请输入0.5-1之间的数字', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              var num = Number(value)
              if (!(0.5 <= num && num <= 1)) {
                callback(new Error("请输入0.5-1之间的数字"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          },
        ],
        appointmentTime: [
          { required: true, message: '请选择预约时间', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        isCompleted: [
          { required: true, message: '请选择是否完成', trigger: 'blur' }
        ],
        isPaid: [
          { required: true, message: '请选择是否支付', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    //提交修改
    onInsert() {
      this.loading = true
      const data = this.form;
      return createOrder(data)
        .then((response) => {
          this.$emit('insertSuccess');
          ElMessage.success("插入成功");
          this.clearAll();
          this.loading = false;
        })
        .catch((error) => {
          ElMessage.error("插入失败");
          console.log(error);
        });
    },
    clearAll() {
      this.form = {
        flowerUserId: '',
        itemId: '',
        number: '',
        serviceCharge: '',
        discount: '',
        totalCharge: '',
        appointmentTime: '',
        description: '',
        isPaid: '',
        isCompleted: '',
        address: ''
      }
    }
  }
}
</script>

<style scoped></style>